<template>
    <view class="order-list-container">
        <!-- 导航栏 -->
        <u-navbar title="我的订单" :is-back="true" title-color="black" />

        <!-- 搜索框 -->
        <view class="search-box">
            <u-search
                bg-color="#f8f8f8"
                v-model="searchKeyword"
                placeholder="请输入订单号或线路名称"
                @search="onSearch"
            ></u-search>
        </view>

        <!-- 状态标签 -->
        <scroll-view scroll-x class="status-tabs">
            <view
                v-for="(tab, index) in tabs"
                :key="index"
                :class="['tab-item', { active: activeTab === tab.status }]"
                @click="changeTab(tab.status)"
            >
                {{ tab.label }}
            </view>
        </scroll-view>

        <!-- 订单列表 -->
        <scroll-view scroll-y class="orders-scroll">
            <view v-if="filteredOrders.length === 0" class="no-orders">暂无订单</view>
            <view v-for="(order, index) in filteredOrders" :key="index" class="order-card">
                <image
                    :src="
                        order.line_image ? order.line_image : '../../static/images/line_image.png'
                    "
                    class="order-image"
                />
                <view class="order-details">
                    <text class="order-name">{{ order?.name }}</text>
                    <view class="time-slot">
                        <text class="order-date">出发日期：{{ order?.estimated_time }}</text>
                        <text class="order-travelers">
                            出行人数：成人 {{ order?.adult_count }} / 儿童 {{ order?.child_count }}
                        </text>
                    </view>
                    <text class="price">¥{{ order?.price }}</text>
                    <view class="payment">
                        <button :class="['pay_btn', statusClass(order.order_status)]">
                            {{ statusText(order.order_status) }}
                        </button>
                    </view>
                </view>
            </view>
        </scroll-view>
    </view>
</template>
<script setup lang="ts">
import { ref, computed, onMounted } from 'vue'
import USearch from '@/uni_modules/vk-uview-ui/components/u-search/u-search.vue'
import { getOrderList } from '@/api/order'

// 搜索关键字
const searchKeyword = ref('')

// 状态标签
const tabs = [
    { label: '全部', status: '' },
    { label: '待支付', status: '0' },
    { label: '已接单', status: '2' },
    { label: '行程中', status: '3' },
    { label: '待评价', status: '4' },
    { label: '已完成', status: '5' },
    { label: '退款', status: '-1' }
]

// 当前选中的 tab
const activeTab = ref('')

// 模拟订单数据
const orders = ref([])

const getOrders = async () => {
    try {
        const data = await getOrderList({
            status: activeTab.value
        })
        orders.value = data.lists || []
    } catch (error) {
        console.error('获取订单数据失败:', error)
        orders.value = []
    }
}

onMounted(() => {
    getOrders()
})

// 过滤后的订单
const filteredOrders = computed(() => {
    if (!searchKeyword.value) return orders.value
    const keyword = searchKeyword.value.toLowerCase()
    return orders.value.filter(
        (order) => order.id.includes(keyword) || order.name?.toLowerCase().includes(keyword)
    )
})

// 切换 tab
function changeTab(status: string) {
    activeTab.value = status
    getOrders()
}

// 搜索事件
function onSearch(keyword: string) {
    searchKeyword.value = keyword
    getOrders()
}

// 返回状态文本
function statusText(status: string): string {
    switch (status) {
        case '1':
            return '待支付'
        case '2':
            return '已接单'
        case '3':
            return '行程中'
        case '5':
            return '待评价'
        case '6':
            return '已完成'
        case '-1':
            return '退款'
        default:
            return ''
    }
}

// 返回状态样式类名
function statusClass(status: string): string {
    switch (status) {
        case '1':
            return 'status-pending'
        case '2':
            return 'status-confirmed'
        case '3':
            return 'status-progress'
        case '4':
            return 'status-review'
        case '5':
            return 'status-completed'
        case '-1':
            return 'status-refunded'
        default:
            return ''
    }
}
</script>
<style scoped lang="scss">
.order-list-container {
    //padding: 20rpx 0;
    background-color: #f5f5f5;
}

.search-box {
    padding: 20rpx;
    background-color: #ffffff;
}

.status-tabs {
    white-space: nowrap;
    display: flex;
    overflow-x: auto;
    border-bottom: 1rpx solid #eee;
}

.tab-item {
    background-color: #ffffff;
    display: inline-block;
    padding: 20rpx 30rpx;
    font-size: 28rpx;
    color: #000000;

    &.active {
        font-weight: bold;
        border-bottom: 4rpx solid #f6a22d;
    }
}

.orders-scroll {
    height: calc(100vh - 220rpx);
}

.no-orders {
    text-align: center;
    margin-top: 100rpx;
    color: #999;
}

.order-card {
    display: flex;
    background-color: #fff;
    margin-bottom: 30rpx;
    padding: 20rpx;
    box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
}

.order-image {
    width: 240rpx;
    height: 240rpx;
    margin-right: 20rpx;
    border-radius: 8rpx;
}

.order-details {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    position: relative;
}

.order-name {
    font-size: 32rpx;
    font-weight: bold;
}

.order-date,
.order-travelers {
    font-size: 26rpx;
    color: #666;
}

.time-slot {
    display: flex;
    font-size: 24rpx;
    flex-direction: column;
    background-color: #f8f8f8;
    color: #6e7681;
    border-radius: 8rpx;
    line-height: 1.5;
    padding: 15rpx;
    margin-bottom: 15rpx;
}

.payment {
    //background-color: #fff;
    display: flex;
    justify-content: flex-end;
}

.price {
    font-size: 36rpx;
    font-weight: bold;
    color: #f6a22d;
}

.order-status {
    position: absolute;
    right: 0;
    top: 0;
    font-size: 28rpx;
    font-weight: bold;
    padding: 10rpx 20rpx;
    border-radius: 8rpx;
}

.pay_btn {
    border-radius: 60rpx;
    background-color: #fef1e0;
    color: #f6a22d;
    width: 220rpx;
    margin: 0;
    border: none;
}

.status-pending {
    color: #f6a22d;
    background-color: #fff6eb;
}

.status-confirmed {
    color: #1890ff;
    background-color: #e6f7ff;
}

.status-progress {
    color: #faad14;
    background-color: #fffbe6;
}

.status-review {
    color: #ff4d4f;
    background-color: #fff1f0;
}

.status-completed {
    color: #52c41a;
    background-color: #f6ffed;
}

.status-refunded {
    color: #8c8c8c;
    background-color: #fafafa;
}
</style>
